<template>
	<AppHeader title="搜索" :banAnimate="true">
		<template #left>
			<img @click="onClickLeft" src="@/assets/images/icon-back-black.png" width="9" height="18" />
		</template>
	</AppHeader>
	<div class="writtenTest-container">
		<form action="/">
			<van-search background="#f5f5f5" shape="round" v-model="keyword" show-action placeholder="请输入搜索关键词"
				@search="onSearch" @clear="onSearch">
				<template #action>
					<div @click="onSearch">搜索</div>
				</template>
			</van-search>
		</form>
		<van-tabs v-model:active="active" background="#f5f5f5" color="#0CB76C" title-active-color="#0CB76C"
			@click-tab="onSearch">
			<van-tab :title="item.gradeName" v-for="(item, idx) in grades"></van-tab>
		</van-tabs>
		<div v-if="grades.length">
			<Mescroll v-bind="mescrollConfig" class="research-dev-demand-pool__scroll-container"
				:style="{ height: 'calc(100vh - 130px)', position: 'fixed', top: '150px', bottom: 0 }"
				@init="mescrollInited" v-show="testList.length>0">
				<!-- :style="{ height: 'calc(100vh - 130px)',width:'100%',position: 'fixed',top: '150px' , bottom: 0 }" -->
				<div class="product-box">
					<div class="product-item" v-for="i in testList" @click="handleClickItem(i)">
						<img :src="i.cover_full" />
						<div class="product-txt">
							<span class="ellipsis-multiline2">{{ i.productName }}</span>
						</div>
					</div>
				</div>
			</Mescroll>
			<van-empty v-show="testList.length==0" description="暂无数据"></van-empty>
		</div>
	</div>
</template>

<script setup>
	import AppHeader from "@/components/AppHeader.vue";
	import Mescroll from "mescroll.js/mescroll.vue";
	import {
		ref,
		toRefs,
		reactive,
		onMounted,
	} from "vue";
	import {
		getGrade
	} from "@/api/listening";
	import {
		newconceptList
	} from '@/api/writtenTest.js'
	import {
		showToast
	} from 'vant';

	import {
		useRouter
	} from "vue-router";
	const router = useRouter();

	const onClickLeft = () => {
		router.go(-1);
	};
	const handleClickItem = (item) => {
		router.push({
			path: "/newConcept/details",
			query: {
				id: item.productId
			},
		});
	};


	const grades = ref([]);
	//获取年级列表
	const getGradesList = async () => {
		getGrade().then(res => {
			grades.value = [{
				grade: '',
				gradeName: "全部",
				period: "1"
			}]
			grades.value = grades.value.concat(res.data.data);
		});
	};
	//切换教材年级
	const onSearch = async (e) => {
		state.testList = []
		state.mescrollInstance.scrollTo(0, 0);
		state.mescrollInstance.resetUpScroll();
	};

	const mescroll = ref(null);
	const active = ref(0);
	const keyword = ref('');
	const state = reactive({
		testList: [],
		mescrollInstance: null,
		mescrollConfig: {
			down: {
				use: true,
			},
			up: {
				auto: true,
				isBounce: false,
				noMoreSize: 1,
				htmlNodata: '<p class="upwarp-nodata">-- 无更多数据 --</p>',
				callback: (page) => {
					getBookList(page);
				},
			},
		},
		curClickItem: {},
		showEnterPopup: false,
	});
	const mescrollInited = (mescroll) => {
		state.mescrollInstance = mescroll;
	};

	const getBookList = ({
		num,
		size = 10
	}) => {
		newconceptList({
			page: num,
			pageSize: size,
			grade: grades.value[active.value].grade,
			key: keyword.value
		}).then((res) => {
			const {
				code,
				data
			} = res;
			if (code == 1 && data) {
				const isNestPage = data.length < size;
				if (num === 1) {
					state.testList = data;
				} else {
					state.testList = state.testList.concat(data);
				}
				state.mescrollInstance.endSuccess(state.testList.length, !isNestPage);
			}
		})
	};
	onMounted(async () => {
		getGradesList();
	});
	const {
		loading,
		testList,
		mescrollConfig,
		showEnterPopup
	} = toRefs(state);
</script>

<style scoped lang="scss">
	.writtenTest-container {
		background-color: rgb(245, 245, 245);
		height: 100vh;
		width: 100%;
		padding-top: 46px;

		.product-box {
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			box-sizing: border-box;
			padding: 10px 10px 0;
			overflow-y: auto;

			.product-item:nth-child(3n) {
				margin-right: 0px !important;
			}

			.product-item {
				width: 32%;
				min-height: 192px;
				display: flex;
				flex-direction: column;
				font-size: 12px;
				margin-bottom: 10px;
				margin-right: 2%;
				overflow: hidden;
				border-radius: 15px;

				.product-txt {
					padding: 10px 5px;
					background-color: #fff;
					min-height: 50px;
				}

				img {
					height: 132px;
				}
			}
		}
	}
</style>